<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Your Subpage</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #D9D919; /* 深蓝色背景 */
            color: #ffffff; /* 白色文本 */
        }

        .header-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            position: relative; /* 为了确保内容不超出背景图像 */
            z-index: 1; /* 提高内容层级 */
        }

        .navbar {
            width: 100%;
            height: 30%;
        }

        .logo img {
            max-width: 100%;
            height: auto;
        }

        .players-text {
            font-weight: bold;
            color: #ffffff; /* 白色文本 */
            margin-left: 20px; /* 调整左边距 */
        }

        .content-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 20px; /* 调整上边距 */
        }

        .image-container,
        .video-container,
        .additional-image-container {
            width: 30%; /* 调整容器的宽度 */
        }

        .image-container img,
        .video-container video,
        .additional-image-container img {
            width: 100%;
            height: auto;
        }

        .navigation a {
            color: #ffffff;
            text-decoration: none;
        }

        .navigation a:hover {
            color: #ffcc00;
        }

        .navigation ul li a {
            color: #ffffff;
            text-decoration: none;
        }

        .navigation ul li a:hover {
            color: #ffcc00;
        }

        /* 添加样式以适应小屏幕 */
        @media (max-width: 768px) {
            .content-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .image-container,
            .text-container,
            .additional-image-container,
            .video-container {
                width: 100%; /* 在小屏幕上容器宽度占满一行 */
                margin-top: 20px; /* 调整容器之间的上边距 */
            }
        }
    </style>
</head>
<body>

<div class="header-container">

    <header class="navbar">
        <div class="logo">
            <img src="../image/logo.png" alt="Website Logo">
        </div>
        <nav class="navigation">
            <ul>
                <li><a href="../index.html">Home</a></li>
                <li><a href="../web/Introduction.html">Introduction</a></li>
                <li><a href="../web/players.html">Players</a></li>
                <li><a href="../web/news.html">News</a></li>
                <li><a href="../web/data.html">Data</a></li>
            </ul>
        </nav>

    </header>

</div>

<div class="content-container">

    <div class="image-container">
        <img src="../image/players.jpg.jpg" alt="Subpage Image">
    </div>

    <div class="video-container">
        <video controls>
            <source src="../image/begin.mp4.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <div class="additional-image-container">
        <img src="../image/start.jpg.jpg" alt="Additional Image">
    </div>

</div>

</body>
</html>
